<template>
<div class="add-datasource-type-wrapper main-wrapper">
    <Form ref="typeForm" :model="datasource" :rules="typeValidateRules">
        <FormItem prop="datasourceType">
            <RadioGroup v-model="datasource.datasourceType" type="button" size="large">
                <Radio label="mysql">
                    <i class="zlstbd-icon-mysql"></i><em>MySQL</em>
                </Radio>
                <Radio label="oracle">
                    <i class="zlstbd-icon-oracle"></i><em>Oracle</em>
                </Radio>
                <Radio label="sqlserver">
                    <i class="zlstbd-icon-sqlserver"></i><em>SQL Server</em>
                </Radio>
                <Radio label="hive">
                    <i class="zlstbd-icon-hive"></i><em>Hive</em>
                </Radio>
                <Radio label="file">
                    <i class="zlstbd-icon-file-upload"></i><em>文件</em>
                </Radio>
            </RadioGroup>
        </FormItem>
    </Form>

</div>
</template>

<script>
export default {
    name: 'AddDatasourceType',

    props: {
        datasource: {
            type: Object,
            required: true
        }
    },


    data () {
        return {
            typeValidateRules: {
                datasourceType: [{
                    required: true,
                    message: '请选择数据源类型！'
                }]
            }
        }
    },

    methods: {
        next() {
            this.$refs.typeForm.validate(valid => {
                if (valid) {
                    this.$emit('next');
                }
            })
        }
    },
    mounted () {

    }
}
</script>

<style lang="less">
.add-datasource-type-wrapper {
    margin-top: 32px !important;
    width: 300px;
    .ivu-radio-group-button.ivu-radio-group-large .ivu-radio-wrapper {
        width: 100%;
        height: 56px;
        line-height: 56px;
        font-size: 18px;
        i {
            position: absolute;
            top: 12px;
            left: 24px;
            font-size: 32px;
        }
        em {
            padding-left: 56px;
            font-style: normal;
        }
    }
    .ivu-radio-group-button .ivu-radio-group-item {
        margin-bottom: 16px;
    }
}
</style>
